<template>
  <m-card :title="title" :icon="icon">
    <div class="nav jc-between">
      <div
        class="nav-item"
        :class="{ active: active === i }"
        v-for="(category, i) in categories"
        :key="i"
        @click="$refs.list.swiper.slideTo(i)"
      >
        <div class="nav-link">
          {{ category.name }}
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="pt-3">
      <swiper
        ref="list"
        @slide-change="() => (active = $refs.list.swiper.realIndex)"
        :options="{ autoHeight: true }"
      >
        <swiper-slide v-for="(category, i) in categories" :key="i">
          <slot name="items" :category="category"></slot>
        </swiper-slide>
      </swiper></div
  ></m-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      require: true,
    },
    icon: {
      type: String,
      require: true,
    },
    categories: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>
